import React, { Component } from 'react'

export default class ToDoList extends Component {
    state = {
        val: "",
        list: []
    }
    // 
    changeVal = (val) => {
        this.setState({
            val
        })
    }
    // 按下回车
    keyCode = () => {
        let list = JSON.parse(JSON.stringify(this.state.list))
        list.push({
            text: this.state.val,
            isCheck: false
        })
        this.setState({
            list,
            val: ""
        })
    }
    // 更改多选框
    changeCheck = (check, index) => {
        let list = JSON.parse(JSON.stringify(this.state.list))
        list[index].isCheck = check
        this.setState({
            list
        })
    }
    // 删除
    del = (index) => {
        let list = JSON.parse(JSON.stringify(this.state.list))
        list.splice(index, 1)
        this.setState({
            list
        })
    }
    render() {
        const { val, list } = this.state
        return (
            <div>
                <input value = { val } onChange = {(ev) => {
                    this.changeVal(ev.target.value)
                }} onKeyUp = {(ev) => {
                    if (ev.keyCode === 13) {
                        this.keyCode()
                    }
                }} type="text" />
                <div>
                    <h3>
                        {/* filter ==> 过滤以后返回新的数组 */}
                        正在进行  --- { list.filter(item => !item.isCheck).length }
                    </h3>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li className = { item.isCheck? "none": "block"} key = { index }>
                                    <input checked = { item.isCheck } onChange = {(ev) => {
                                        this.changeCheck(ev.target.checked, index)
                                    }} type="checkbox" />
                                    { item.text }
                                    <button onClick = {() => {
                                        this.del(index)
                                    }}>del</button>
                                </li>
                            })
                        }
                    </ul>
                </div>

                <div>
                    <h3>
                        已经完成  --- { list.filter(item => item.isCheck).length }
                    </h3>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li className = { item.isCheck? "block": "none"} key = { index }>
                                    <input checked = { item.isCheck } onChange = {(ev) => {
                                        this.changeCheck(ev.target.checked, index)
                                    }} type="checkbox" />
                                    { item.text }
                                    <button onClick = {() => {
                                        this.del(index)
                                    }}>del</button>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
